<template>
    <div class="order-container">
        <template>
            <el-table :data="orderData" border style="width: 100%">
                <el-table-column prop="orderDetail" align="center" label="产品图片" width="130">
                    <!-- 插槽作用域 -->
                    <template v-slot="scope">
                        <el-avatar shape="square" :size="80" fit="scale-down" :src="scope.row.orderDetail[0].imageUrl">
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="order_id" align="center" label="订单编号" width="250"> </el-table-column>
                <el-table-column prop="orderDetail[0].productName" align="center" label="产品名称" width="180">
                </el-table-column>
                <el-table-column prop="orderDetail[0].quantity" width="100" align="center" label="数量">
                </el-table-column>
                <el-table-column prop="total_fee" width="100" align="center" label="总价格"> </el-table-column>
                <el-table-column prop="create_time" align="center" width="180" label="创建时间"> </el-table-column>
                <el-table-column prop="pay_status" width="100" align="center" label="支付状态">
                    <template v-slot="{ row }">
                        {{ row.pay_status === 1 ? "已支付" : "未支付" }}
                    </template>
                </el-table-column>
                <el-table-column prop="order_status" width="100" align="center" label="订单状态">
                    <template v-slot="{ row }">
                        <span v-if="row.order_status == 0">未提交</span>
                        <span v-else-if="row.order_status == 1">提交成功</span>
                        <span v-else-if="row.order_status == 2">已经取消</span>
                        <span v-else-if="row.order_status == 3">无效订单</span>
                        <span v-else-if="row.order_status == 4">交易关闭</span>
                        <span v-else-if="row.order_status == 5">退货</span>
                    </template>
                </el-table-column>
                <el-table-column prop="opration" align="center" label="操作">
                    <template v-slot="{ row }">
                        <el-button type="primary" v-hasPay="[row.pay_status, row.order_status]"
                            icon="iconfont icon-chongzhi"> 去支付 </el-button>
                        <el-button type="danger" icon="el-icon-delete"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
import * as api from "@/api/pay"
export default {
    data() {
        return {
            orderData: []
        };
    },
    meta: {
        name: "订单管理",
        title: "order",
        icon: 'iconfont icon-dingdanjihe'
    },
    created() {
        //获取订单
        this.getOrderList()
    },
    methods: {
        getOrderList() {
            api.getOrderApi()
                .then(res => {
                    console.log(res.data)
                    this.orderData = res.data.data
                })
        }
    },
    directives: {
        hasPay: {
            inserted(el, binding) {
                // console.log(binding);
                //指令接收的是用户的支付状态
                //0未支付 显示去支付按钮
                //1已支付 禁用去支付按钮
                //接收到的参数是一个数组 [pay_status,order_status]
                let [pay_status, order_status] = binding.value;
                //先保存当前按钮的类名
                let className = el.className;
                //当pay_status不是0 的时候
                //order_status不是1的时候
                //禁用按钮
                //order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
                if (pay_status !== 0 || order_status !== 1) {
                    el.disabled = true; //禁用按钮
                    el.className = className + " " + "is-disabled";
                }
            },
        },
    },

};
</script >

<style scoped lang="less">
.el-avatar {
    /deep/ img {
        width: 100%;
    }

    height: 30px !important;
    background-color: #fff;
}
</style>
